<template>
  <div class="searchTop clear">
    <div class="searchLogo">
      <img src="../assets/img/five-logo.jpg" alt />
    </div>
    <div class="searchBox">
      <input type="text" class="searchText" placeholder="请输入关键字进行搜索">
      <i class="iconfont icon-sousuo1 searchBtn greenBg" @click="search"></i>
      <div class="hotSearch clear">
        <span>热门：</span><em>奇异果</em>
      </div>
    </div>
    <div class="personComBox">
      <PersonBtn></PersonBtn>
    </div>
    <div class="ShopCartComBox">
      <ShopCartBtn></ShopCartBtn>
    </div>
  </div>
</template>
<script>
import PersonBtn from '@/components/PersonBtn.vue';
import ShopCartBtn from '@/components/ShopCartBtn.vue';
export default {
  components:{
    PersonBtn,
    ShopCartBtn,
  },
  methods:{
    search(){
      this.$router.push({
        name:'searchpage'
      })
    }
  }
}
</script>
<style scoped>
@import url(http://at.alicdn.com/t/font_1435664_i49ixn69far.css);
.searchTop {
  width: 66.6667%;
  margin: auto;
  position: relative;
  margin-bottom: 38px;
}
.searchLogo {
  width: 28.9063%;
  float: left;
  padding-top: 25px;
}
.searchLogo img {
  width: 100%;
}
.searchBox{
  width: 35.625%;
  height: 36px;
  position: absolute;
  left: 28.9063%;
  bottom: 0;
  margin-left: 60px;
  border: 1px solid #4b943d;
}
.searchBox .searchText{
  width: 100%;
  height: 100%;
  border: none;
  text-indent: 5px;
}
.searchBox .searchBtn{
  width: 38px;
  height: 36px;
  color: #fff;
  font-size: 24px;
  line-height: 36px;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
}
.hotSearch{
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  color: #353535;
  position: absolute;
  left: 0;
  bottom: -20px;
}
.hotSearch span{
  float: left;
}
.hotSearch em{
  float: left;
  margin: 0 10px;
}
.personComBox{
  position: absolute;
  right: 125px;
  bottom: 0;
}
.ShopCartComBox{
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>
